<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/fragment :: head('博客管理')"></head>
<body>

<!--导航-->
<nav th:replace="admin/fragment :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ></nav>

<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a th:href="@{/admin/blogs/add}" class="item">发布</a>
            <a th:href="@{/admin/blogs}" class="teal active item">列表</a>
        </div>
    </div>
</div>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <form action="#" method="post" class="ui segment form">
        <div class="inline fields">
          <div class="field">
            <input type="text" name="title" placeholder="标题">
          </div>
          <div class="field">
            <div class="ui selection dropdown">
              <input type="hidden" name="type">
              <i class="dropdown icon"></i>
              <div class="default text">分类</div>
              <div class="menu">
                <div class="item" data-value="1">错误日志</div>
              </div>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="recommend" name="recommend">
              <label for="recommend">推荐</label>
            </div>
          </div>
          <div class="field">
            <button class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
          </div>
        </div>
      </form>

      <table class="ui celled table">
        <thead>
          <tr>
            <th></th>
            <th>标题</th>
            <th>类型</th>
            <th>推荐</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="page : ${pageInfo.list}">
            <td th:text="${page.id}"></td>
            <td th:text="${page.title}"></td>
            <td th:text="${page.getType().name}"></td>
              <td th:text="${page.published == true ? '是' : '否'}"></td>
            <td th:text="${#dates.format(page.updateTime, 'yyyy-MM-dd HH:mm')}"></td>
            <td>
              <a th:href="@{/admin/blogs/edit/{id}(id=${page.id})}" class="ui mini teal basic button">编辑</a>
              <a th:href="@{/admin/blogs/delete/{id}(id=${page.id})}" class="ui mini red basic button">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="6">
                <div class="ui mini pagination menu">
                    <a th:href="@{/admin/types(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" class="  item"
                       th:unless="${pageInfo.isFirstPage}">上一页</a>
                    <a th:href="@{/admin/types(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" class=" item"
                       th:unless="${pageInfo.isLastPage}">下一页</a>
                </div>
              <a th:href="@{/admin/blogs/add}" class="ui mini right floated teal basic button">新增</a>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <br>
  <br>


<!--底部footer-->
<footer th:replace="admin/fragment :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>
<th:block th:replace="admin/fragment :: script"></th:block>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

  </script>
</body>
</html>